import { useNavigate } from 'react-router-dom'
import style from './selectionItem.module.css'
import { SaveSelect } from '../../../myTypes'

interface Prop {
  s: SaveSelect
}

export default function SelectionItem(prop: Prop) {
  const navigate = useNavigate()
  const { s } = prop

  function goCircleDetail(isVideo: boolean, id: string) {
    if (isVideo) {
      navigate(`/video?circleid=${id}`, { state: { type: s.type } })
    } else {
      navigate(`/circleget?circleid=${id}`, { state: { type: s.type } })
    }
  }
  return (
    <div className={style['select-item']} onClick={() => goCircleDetail(s.isVideo === 1, s.id)}>
      <div className={style['select-pic']}>
        {s.isVideo === 0 && <img src={s.img} alt="" />}
        {s.isVideo === 1 && (
          <>
            {s.img.match(/\.gif$/) && <img src={s.img} alt="" />}
            {s.img.match(/\.mp4$/) && <video width={'100%'} src={s.img}></video>}
            <div className={style.icon}>
              <img src="/static/use/icon-video-play-fff.png" alt="" />
            </div>
          </>
        )}
      </div>
      <div className={style.title}>{s.title}</div>
      <div className={style.user}>
        <div className={style['user-info']}>
          <div className={style['user-head']}>
            <img src={s.circleUser.head} alt="" />
          </div>
          <div className={style.nickname}>{s.circleUser.name}</div>
        </div>
        <div className={style.zero}>···</div>
      </div>
    </div>
  )
}
